<template>
  <div>
    <div v-show="show">
      <div class="table-page-search-wrpper">
        <el-row :gutter="10">
          <el-col :span="18">
            <el-form :inline="true" :model="queryParam" @keyup.enter.native="searchQuery">
              <el-col :span="7">
                <el-form-item label="专辑名称">
                  <el-input  placeholder="请输入内容模糊查询" v-model="queryParam.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="日期">
<!--                  <el-range-picker v-model="queryParam.date"-->
<!--                                  valueFormat="YYYY-MM-DD"-->
<!--                                  :placeholder="['开始时间', '结束时间']"-->
<!--                                    />-->
                  <el-date-picker
                      v-model="queryParam.date"
                      type="daterange"
                      range-separator="~"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      style="width: 230px"
                      @change="onDateChange"
                      value-format="yyyy-MM-dd"
                  />
                </el-form-item>
              </el-col>
            </el-form>
          </el-col>
          <el-col :span="6">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <el-button type="primary" @click="searchQuery" icon="search">查询</el-button>
                <el-button @click="searchReset" icon="reload" style="margin-left: 8px">重置</el-button>
            </span>
          </el-col>
        </el-row>
      </div>
      <div class="table-operator">
        <el-button @click="handleAdd" type="primary" icon="el-icon-plus">新增</el-button>
      </div>
      <el-table :data="albumList" style="width: 100%">
        <el-table-column prop="name" label="名称"/>
        <el-table-column prop="date" label="日期"/>
        <el-table-column prop="language" label="语言"/>
        <el-table-column prop="recordcompany" label="唱片公司"/>
        <el-table-column prop="type" label="类型"/>
        <el-table-column label="操作">
          <template #default="scope">
            <a @click="handleEdit(scope.row)">编辑</a>
            <el-divider direction="vertical" />
            <a @click="handleDetail(scope.row.id)">歌曲</a>
            <el-divider direction="vertical" />
            <a @click="handleDelete(scope.row.id)">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            @current-change="handleCurrentChange"
            :page-size="PageData.pageSize"
            layout="prev, pager, next, jumper"
            :total="PageData.total">
        </el-pagination>
      </div>
    </div>
    <model-form ref="modelForm" @ok="modelFormOk"></model-form>
    <detail ref="modelAlbumDetail" ></detail>
  </div>
</template>

<script>
import {deleteAlbum, getAlbum} from "@/plugins/api";
import modelForm from "./components/Model"
import detail from "./Detail"
export default {
  name: "music",
  components:{
    modelForm,
    detail
  },
  data(){
    return{
      show:true,
      albumList:[
      ],
      PageData: {
        pageNo:1,
        pageSize:10,
        total:100,
      },
      queryParam:{
        name:"",
        date:"",
        startDate:"",
        endDate:"",
      }
    }
  },
  methods:{
    getAlbumData(){
      let _this = this
      var urlSearchParams = new URLSearchParams();
      urlSearchParams.set("pageNo", this.PageData.pageNo)
      urlSearchParams.set("pageSize", this.PageData.pageSize)
      urlSearchParams.set("searchName", this.queryParam.name)
      urlSearchParams.set("startDate",this.queryParam.startDate)
      urlSearchParams.set("endDate", this.queryParam.endDate)
      getAlbum(urlSearchParams).then(function (msg) {
        _this.albumList = msg.data.pageList.records;
        _this.PageData.total = msg.data.pageList.total;
      })
    },
    handleCurrentChange(val){
      this.PageData.pageNo = val
      this.getAlbumData()
    },

    handleDetail(id){
      this.$refs.modelAlbumDetail.getAlbumDetail(id)
      this.show=false;
      this.$refs.modelAlbumDetail.albumDetailVisible=true
    },
    modelFormOk() {
      // 新增/修改 成功时，重载列表
      this.getAlbumData();
      //清空列表选中
      // this.onClearSelected()
    },
    handleAdd(){
      this.$refs.modelForm.method='add'
      this.$refs.modelForm.add()
      this.$refs.modelForm.title="新增专辑"
      this.$refs.modelForm.modelVisible=true
    },
    handleEdit(record){
      this.$refs.modelForm.method='edit'
      this.$refs.modelForm.edit(record)
      this.$refs.modelForm.title="编辑专辑信息"
      this.$refs.modelForm.modelVisible=true
    },
    handleDelete(id){
      var _this=this;
      deleteAlbum("id="+id).then(function (msg){
        if(msg.code==200){
          _this.$message.success(msg.msg);
          _this.getAlbumData();
        }else{
          _this.$message.warning(msg.msg);
        }
      })
    },
    searchQuery(){
      this.getAlbumData()
    },
    searchReset() {
      this.queryParam = {
        name:"",
        date:"",
        startDate:"",
        endDate:""
      }
      this.getAlbumData()
    },
    onDateChange(){
      this.queryParam.startDate=this.queryParam.date[0]
      this.queryParam.endDate=this.queryParam.date[1]


    }

  },
  created() {
    this.getAlbumData()
  },
}
</script>


<style scoped>
a:hover{
  color: rgb(255, 111, 20);
}
a{
  color: rgb(249, 165, 142);
}
.table-operator{
  margin-bottom: 20px;
}
.el-button{
  padding: 10px 20px;
  color: #FFF;
  background: rgb(255, 111, 20);
  border-color: rgb(255, 111, 20);


}
.el-button:focus,.el-button:hover{
  color: #FFF;
  background-color:rgb(251, 138, 26);
  border-color: rgb(251, 138, 26);
}
.pagination{
  text-align: center;
}
.table-page-search-wrpper{
  margin-top: 20px;
}


</style>